<template>
  <q-dialog v-model="dialog" position="bottom">
    <div class="bg-white full-width" style="border-radius: 8px 8px 0px 0px">
      <div><q-btn padding="sm sm" @click="close" style="color: #999" unelevated round icon="close" /></div>

      <section class="q-pa-md">
        <div style="font-size: 20px; font-weight: bold">阅读并同意相关协议</div>
        <div class="q-mt-xs" style="color: #999; font-size: 12px">请仔细阅读并同意以下协议</div>

        <div class="text-center q-mt-lg q-pt-md" style="color: #999">金耀花个人征信协议查询授权书</div>

        <div v-if="!webUrl" style="word-break: break-all" class="q-mt-sm">
          特别提醒：尊敬的客户，为维护您的合法权益，请你仔细阅读本授权书条款，并特别注意其中以黑体标注的条款。除非您已阅读并接受本授权书所有条款，否则请不要进行后续操作。您通过网络页面或客户端同意本授权书，即视为您已经充分阅读并理解本授权书所有条款同意承担由此带来的一切法律后果。
        </div>
        <div v-else class="q-mt-sm">
          <iframe ref="iframeRef" :src="webUrl" class="relative-position" style="border: none; outline: none; height: 200px; width: 100%; z-index: 4;"></iframe>
          <div class="absolute-full center" style="z-index: 1;" v-if="isShowIframeLoading" >
            <q-spinner color="primary" size="3em" />
          </div>
        </div>

        <div class="q-mt-lg" style="color: #666">特此授权</div>

        <div class="flex items-center no-wrap q-mt-lg" style="color: #666">
          <div class="" style="white-space: nowrap; width: 130px">授权人：</div>
          <div>{{ useAppStore().getAuthInfoData.realname }}</div>
        </div>
        <div class="flex items-center no-wrap q-mt-sm" style="color: #666">
          <div class="" style="white-space: nowrap; width: 130px">授权人身份证号码：</div>
          <div>{{ useAppStore().getAuthInfoData.idcard }}</div>
        </div>

        <q-btn
          label="同意协议并申请"
          padding="none none"
          unelevated
          :loading="loading"
          rounded
          @click="submit"
          class="full-width q-mt-xl"
          style="background-color: #FFAD13; color: #fff; padding: 8px 18px !important; font-size: 15px; font-weight: 600"
        />
      </section>
    </div>
    <SignatureDialog ref="SignatureDialogRef" />
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import SignatureDialog from './SignatureDialog.vue'
import { Param, Show } from './Protocol';
import {useAppStore} from 'src/stores/app-store'
import { SignatureDialogInstance } from './SignatureDialog';
import { approveToPushApi } from 'src/api/info';
import { showLoadingToast } from 'vant';
import { useAfterHandler } from './afterHandler';
import { useRoute, useRouter } from 'vue-router';

const router = useRouter()
const route = useRoute()

const webUrl = ref('');
const iframeRef = ref<HTMLIFrameElement>()
const isShowIframeLoading = ref(true)
const SignatureDialogRef = ref<SignatureDialogInstance>()

const loading = ref(false)

watchEffect(() => {
  if (!iframeRef.value) return;
  iframeRef.value.onload = () => {
    isShowIframeLoading.value = false
  }
})

const dialog = ref(false);
const param = ref<Param>()
const show:Show = (agreement, _param) => {
  webUrl.value = agreement?.length ? agreement : ''
  isShowIframeLoading.value = !!agreement?.length
  param.value = _param
  dialog.value = true;
};

const close = () => {
  dialog.value = false;
}
const submit = async () => {
  if (!param.value) return;

  loading.value = true
  const toast = showLoadingToast({
    iconSize: 50,
    forbidClick: true,
    duration: 0,
  });
  await approveToPushApi({
    orderId: param.value.orderId,
    itemOrderIds: param.value.itemOrderIds,
  }).finally(() => loading.value = false)
  toast.close()
  if (param.value.approveUrl) {
    window.location.href = param.value.approveUrl
    return;
  }
  useAfterHandler(router, route).afterHandler()
  // SignatureDialogRef.value?.show(param.value)
};
defineExpose({ show });
</script>
